<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#home">
				<span class="mui-icon">
					<img class="tab-img" style="width: 100%;" src="./img/ic_tab_home_selected.png">
				</span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#live">
				<span class="mui-icon">
					<img class="tab-img" style="width: 100%;" src="./img/ic_tab_zhibo_normal.png">
				</span>
				<span class="mui-tab-label">直播</span>
			</a>
			<a class="mui-tab-item" href="#find">
				<span class="mui-icon">
					<img class="tab-img" style="width: 100%;" src="./img/ic_tab_discovery_normal.png">
				</span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" href="#mine">
				<span class=" mui-icon">
					<img class="tab-img" style="width: 100%;" src="./img/ic_tab_mine_normal.png">
				</span>
				<span class="mui-tab-label  mine">未登录</span>
			</a>
		</nav>
		<div class="mui-iframe-wrapper" style="top: 0px; bottom: 51px;"><iframe src="" id="" name=""></iframe></div>



	</body>

	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init({
			keyEventBind: {
				backbutton: false, //Boolean(默认truee)关闭back按键监听
				menubutton: false //Boolean(默认true)关闭menu按键监听
			}
		})
		const htmlList = ['pages/home.html',
			'pages/live.html',
			'pages/find.html',
			'pages/mine.html'
		]






		document.querySelector('iframe').src = htmlList[0]

		for (let i = 0; i < mui('.mui-tab-item').length; i++) {

			mui('.mui-tab-item')[i].addEventListener('tap', function() {

				for (let j = 0; j < mui('.mui-tab-item').length; j++) {
					mui('.tab-img')[j].src = mui('.tab-img')[j].src.replace('selected', 'normal')
				}
				this.children[0].children[0].src = this.children[0].children[0].src.replace('normal', 'selected')

				document.querySelector('iframe').src = htmlList[i]




			})

		}


		if (localStorage.getItem('userid')) {
			$('.mine').text(localStorage.getItem('userid'))
		} else {
			$('.mine').text('未登录')
		}
	</script>


</html>
